<!-- eslint-disable vue/html-indent -->
<template>
  <div class="operationList">
    <div class="title">
      <p class="tip">运维事件单</p>
      <div class="Button_Summary">
        <button class="goBack exceptions" @click="SummaryExport" v-if="Derived_exception"
          >导出各异常汇总表</button
        >
        <button class="goBack exceptions" @click="BySysSummaryExport" v-if="Derived_exception"
          >导出各类所属系统汇总表
        </button>
        <button class="goBack" @click="back">返回</button>
      </div>
    </div>
    <div class="contain">
      <el-container>
        <el-header>
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="1">领取超时</el-menu-item>
            <el-menu-item index="2">紧急超时</el-menu-item>
            <el-menu-item index="10">处理超时</el-menu-item>
            <el-menu-item index="11">转三线处理超时</el-menu-item>
            <el-menu-item index="3">疑难超时</el-menu-item>
            <el-menu-item index="4">关联超时</el-menu-item>
            <el-menu-item index="5">数据变更超时</el-menu-item>
            <el-menu-item index="9">当前紧急</el-menu-item>
            <el-menu-item index="13">今日待完成</el-menu-item>
            <el-menu-item index="15">异常待处理</el-menu-item>
            <el-menu-item index="14">退回重提交</el-menu-item>
          </el-menu>
        </el-header>
        <el-main>
          <!-- <router-view></router-view> -->
          <div class="main">
            <el-form ref="searchForm" :inline="true" class="demo-form-inline">
              <el-form-item label="系统名称">
                <!-- <el-autocomplete
                  clearable
                  class="inline-input"
                  v-model="state"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入系统名称"
                  :trigger-on-focus="false"
                  @select="handleSelect_orgId"
                ></el-autocomplete> -->
                <el-select
                  v-model="state"
                  placeholder="请选择系统"
                  style="width: 240px"
                  filterable
                  clearable
                  @change="handleSelect_orgId"
                >
                  <el-option
                    v-for="(item, index) in restaurants"
                    :key="index + 1"
                    :label="item.value"
                    :value="item.orgId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="单号" prop="changeCode" class="leftMargiin">
                <el-input
                  clearable
                  v-model="changeCode"
                  class="inline-input"
                  placeholder="请输入单号"
                />
              </el-form-item>
              <el-form-item label="标题" prop="changeTitle" class="leftMargiin">
                <el-input
                  clearable
                  v-model="changeTitle"
                  class="inline-input"
                  placeholder="请输入标题"
                />
              </el-form-item>
            </el-form>
            <div class="button">
              <button @click="detail" class="btn">查看详情</button>
              <button @click="search" @keyup.enter="monitor()" class="btn reset"> 搜索 </button>
              <button @click="resetForm" class="btn">重置</button>
              <el-dropdown trigger="click" v-if="Exception">
                <span class="el-dropdown-link">
                  导出<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item icon="el-icon-plus" @click="downloadExcel">
                      导出当前页</el-dropdown-item
                    >
                    <el-dropdown-item icon="el-icon-circle-plus" @click="Select_downloadExcel">
                      导出所有页</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <button id="goBack" @click="classification()" v-if="Exception">
                按所属系统汇总
              </button>
            </div>
          </div>
          <div class="tableBox">
            <div class="desc" v-if="descNo">
              <img src="../../assets/images/bbsm.png" alt="" />
              {{ desc }}
            </div>
            <div class="table" ref="container" v-if="!difficult">
              <el-table
                :height="tableHeight"
                class="table"
                ref="multipleTableRef"
                :data="changeList"
                tooltip-effect="dark"
                @select="selectChange"
                @selection-change="handleSelectionChange"
                row-key="getRowKey"
                @row-click="handleRowClick"
              >
                <!--  -->
                <el-table-column align="center" :reserve-selection="false" type="selection">
                </el-table-column>
                <el-table-column align="center" prop="faultNo" label="单号" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="faultDecriptSummary"
                  label="事件标题"
                  show-overflow-tooltip
                >
                </el-table-column>

                <el-table-column
                  align="center"
                  prop="sysName"
                  label="所属系统"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="groupName"
                  label="当前工作组"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="appSubDept"
                  label="归属处室"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column align="center" label="系统所处阶段" show-overflow-tooltip>
                  <template #default="scope">
                    <span>{{ activation(scope.row.systemStage) }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="是否紧急" show-overflow-tooltip>
                  <template #default="scope">
                    <span>{{ scope.row.ifJj == 1 ? '是' : scope.row.ifJj == 2 ? '否' : '' }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="orgName"
                  label="发生机构"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column align="center" label="当前处理人" show-overflow-tooltip>
                  <template #default="scope">
                    <span>{{ scope.row.status == '03' ? '' : scope.row.currentHandler }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="处理方式" show-overflow-tooltip>
                  <template #default="scope">
                    <span>{{
                      scope.row.dealMode == '01'
                        ? '正常处理'
                        : scope.row.dealMode == '03'
                        ? '多方配合处理'
                        : scope.row.dealMode == '04'
                        ? '数据变更处理'
                        : scope.row.dealMode == '05'
                        ? '差错处理'
                        : scope.row.dealMode == '06'
                        ? '转三线处理'
                        : ''
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="oneSlaName"
                  label="一级服务目录"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="twoSlaName"
                  label="二级服务目录"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="threeSlaName"
                  label="三级服务目录"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="appDutyman"
                  label="应用管理员"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  v-if="activeIndex == '15' ? true : false"
                  align="center"
                  prop="bizType"
                  label="类型"
                  show-overflow-tooltip
                ></el-table-column>
              </el-table>
            </div>
            <!-- 疑难列表 -->
            <div class="table" ref="container" v-if="difficult">
              <el-table
                :height="tableHeight"
                class="table"
                ref="multipleTableRef"
                :data="changeList"
                tooltip-effect="dark"
                @select="selectChange"
                @selection-change="handleSelectionChange"
                row-key="getRowKey"
                @row-click="handleRowClick"
              >
                <!--  -->
                <el-table-column align="center" :reserve-selection="false" type="selection">
                </el-table-column>
                <el-table-column align="center" label="疑难单号" prop="no" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="fmNo" label="运维单号" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="groupName"
                  label="当前工作组"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="sysName"
                  label="所属系统"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="systemStage"
                  label="系统所处阶段"
                  show-overflow-tooltip
                >
                  <template #default="scope">
                    <span>{{ activation(scope.row.systemStage) }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="appSubDept"
                  label="归属处室"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column align="center" label="来源" show-overflow-tooltip>
                  <template #default="scope">
                    <span>
                      {{
                        scope.row.source == 1
                          ? '手工转'
                          : scope.row.source == 2
                          ? '同工作组领取超次'
                          : scope.row.source == 3
                          ? '参与系统超数'
                          : ''
                      }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="dealName"
                  label="当前处理人"
                  show-overflow-tooltip
                ></el-table-column>
              </el-table>
            </div>

            <!-- 分页 -->
            <el-pagination
              ref="pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { ref, onMounted, reactive, onBeforeUnmount, computed, watch } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import {
    changeOrganization,
    getFmbizPagerList,
    fmBizSummaryExport,
    fmBizBySysSummaryExport,
    fmBizSummaryList,
    download,
    exportFmBiz
  } from '@/http/api/operation';
  const router = useRouter();
  const route = useRoute();
  const Derived_exception = ref(true);
  const changeList = reactive([]);
  const pageNum = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const changeTitle = ref('');
  const changeCode = ref('');
  // const changeId = ref('');
  // const difficlt_title = ref(true);
  const difficult = ref(false);
  const state = ref('');
  const orgId = ref('');
  const restaurants = reactive([]);
  const tableHeight = ref(0);
  // const code = ref('单号');
  // const bizType = ref(false);
  const Exception = ref(false);
  const desc = ref('');
  const descNo = ref(false);
  const container = ref(null);
  const multipleTableRef = ref<InstanceType<typeof ElTable>>();
  const multipleTable = ref<User[]>([]);
  const activeIndex = ref(route.params.type ? route.params.type : '1');
  onMounted(() => {
    getPage();
    calHeight();
    switch (activeIndex.value) {
      case '1':
        descNo.value = true;
        desc.value = '领取超时：超过2个小时未领取的运维事件单';
        Derived_exception.value = true;
        Exception.value = true;
        // completed_resubmit.value = true;
        // getCollectionTimeout();
        // code.value = '单号';
        // difficult.value = false;
        // difficlt_title.value = true;
        getFmbizPager();
        break;
      case '2':
        descNo.value = true;
        Derived_exception.value = true;
        Exception.value = true;
        // completed_resubmit.value = true;
        // difficult.value = false;
        // difficlt_title.value = true;
        // code.value = '单号';
        desc.value = '紧急超时：超过2个小时未解决的紧急的运维事件单';
        // getEmergencyTimeout();
        getFmbizPager();
        break;
      case '3':
        descNo.value = true;
        Derived_exception.value = true;
        Exception.value = true;
        // completed_resubmit.value = true;
        //  difficult.value = true;
        // difficlt_title.value = false;
        // code.value = '疑难单号';
        desc.value = '疑难事件：超过创建时间3个工作日的待处理的疑难事件单';
        getFmbizPager();
        break;
      case '4':
        descNo.value = true;
        Derived_exception.value = true;
        Exception.value = true;
        // completed_resubmit.value = true;
        // code.value = '单号';
        // difficult.value = false;
        // difficlt_title.value = true;
        desc.value = '关联超时：超过处理时间5个工作日的未关联的运维事件单';
        getFmbizPager();
        // getFmBizRelationIssue();
        break;
      case '5':
        descNo.value = true;
        Derived_exception.value = true;
        Exception.value = true;
        // completed_resubmit.value = true;
        // code.value = '单号';
        // difficult.value = false;
        // difficlt_title.value = true;
        desc.value =
          '数据变更超时：数据变更单自创建后超过20个自然日（参数可配置）仍未处理至关闭，相关联的运维事件单';
        //getCmBizSjTimeout();
        getFmbizPager();
        break;
      case '9':
        Derived_exception.value = false;
        Exception.value = true;
        descNo.value = false;
        getFmbizPager();
        break;
      case '10':
        descNo.value = true;
        Derived_exception.value = true;
        Exception.value = true;
        desc.value =
          '处理超时：在途且流转到数据中心的、非紧急的、非数据变更中、超过处理考核时限的运维事件单';
        getFmbizPager();
        break;
      case '11':
        descNo.value = true;
        Derived_exception.value = true;
        Exception.value = true;
        desc.value = '转三线处理超时：转项目组三线处理超过一个工作日';
        getFmbizPager();
        break;
      case '13':
        Exception.value = true;
        Derived_exception.value = false;
        descNo.value = false;
        getFmbizPager();
        break;
      case '14':
        Exception.value = true;
        Derived_exception.value = false;
        descNo.value = false;
        getFmbizPager();
        break;
      case '15':
        Exception.value = false;
        Derived_exception.value = true;
        descNo.value = false;
        fmBizSummary();
        break;
    }
    enterKeyup();
    changeOrgan();
  });
  const getPage = () => {
    const localPage = localStorage.getItem('operationListPage');
    if (localPage != null) {
      pageNum.value = Number(localPage);
    } else {
      pageNum.value = 1;
    }
  };
  const activation = computed(() => {
    return (value) => {
      switch (value) {
        case '01':
          return '需求及技术方案阶段';
          break;
        case '02':
          return '立项阶段';
          break;
        case '03':
          return '开发测试阶段';
          break;
        case '04':
          return '已转生产待投产';
          break;
        case '05':
          return '已投产未交接一线';
          break;
        case '06':
          return '已交接一线未交接二线';
          break;
        case '07':
          return '已交接二线+部分新增功能未交接';
          break;
        case '08':
          return '已交接二线';
          break;
        case '09':
          return '已下线';
          break;

        default:
          break;
      }
    };
  });
  const classification = () => {
    router.push({
      name: 'relation',
      params: {
        typeNum: activeIndex.value
      }
    });
  };
  const getFmbizPager = () => {
    getFmbizPagerList({
      pageNum: JSON.stringify(pageNum.value),
      pageSize: JSON.stringify(pageSize.value),
      sysid: orgId.value,
      faultDecriptSummary: changeTitle.value,
      faultNo: changeCode.value,
      flag: activeIndex.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      changeList.length = 0;
      (changeList as any).push(...res.data.rows);
      total.value = res.data.total;
    });
  };
  const fmBizSummary = () => {
    fmBizSummaryList({
      pageNum: JSON.stringify(pageNum.value),
      pageSize: JSON.stringify(pageSize.value),
      sysid: orgId.value,
      faultDecriptSummary: changeTitle.value,
      faultNo: changeCode.value,
      flag: '1'
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      changeList.length = 0;
      (changeList as any).push(...res.data.rows);
      total.value = res.data.total;
    });
  };
  const changeOrgan = () => {
    changeOrganization().then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      restaurants.length = 0;
      res.data.data.forEach((item) => {
        (restaurants as any).push({
          value: item.orgName,
          orgId: item.orgId
        });
      });
    });
  };
  const monitor = () => {
    document.onkeydown = (e) => {
      if (e.keyCode == 13) {
        search();
      }
    };
  };
  const enterKeyupDestroyed = () => {
    document.removeEventListener('keyup', monitor());
  };
  const enterKeyup = () => {
    document.addEventListener('keyup', monitor());
  };
  const handleSelect = (key: any) => {
    activeIndex.value = key;
    switch (activeIndex.value) {
      case '1':
        descNo.value = true;
        desc.value = '领取超时：超过2个小时未领取的运维事件单';
        Derived_exception.value = true;
        Exception.value = true;
        // completed_resubmit.value = true;
        // getCollectionTimeout();
        // code.value = '单号';
        // difficult.value = false;
        // difficlt_title.value = true;
        getFmbizPager();
        break;
      case '2':
        descNo.value = true;
        Derived_exception.value = true;
        Exception.value = true;
        // completed_resubmit.value = true;
        // difficult.value = false;
        // difficlt_title.value = true;
        // code.value = '单号';
        desc.value = '紧急超时：超过2个小时未解决的紧急的运维事件单';
        // getEmergencyTimeout();
        getFmbizPager();
        break;
      case '3':
        descNo.value = true;
        Derived_exception.value = true;
        Exception.value = true;
        // completed_resubmit.value = true;
        //  difficult.value = true;
        // difficlt_title.value = false;
        // code.value = '疑难单号';
        desc.value = '疑难事件：超过创建时间3个工作日的待处理的疑难事件单';
        getFmbizPager();
        break;
      case '4':
        descNo.value = true;
        Derived_exception.value = true;
        Exception.value = true;
        // completed_resubmit.value = true;
        // code.value = '单号';
        // difficult.value = false;
        // difficlt_title.value = true;
        desc.value = '关联超时：超过处理时间5个工作日的未关联的运维事件单';
        getFmbizPager();
        // getFmBizRelationIssue();
        break;
      case '5':
        descNo.value = true;
        Derived_exception.value = true;
        Exception.value = true;
        // completed_resubmit.value = true;
        // code.value = '单号';
        // difficult.value = false;
        // difficlt_title.value = true;
        desc.value =
          '数据变更超时：数据变更单自创建后超过20个自然日（参数可配置）仍未处理至关闭，相关联的运维事件单';
        //getCmBizSjTimeout();
        getFmbizPager();
        break;
      case '9':
        Derived_exception.value = false;
        Exception.value = true;
        descNo.value = false;
        getFmbizPager();
        break;
      case '10':
        descNo.value = true;
        Derived_exception.value = true;
        Exception.value = true;
        desc.value =
          '处理超时：在途且流转到数据中心的、非紧急的、非数据变更中、超过处理考核时限的运维事件单';
        getFmbizPager();
        break;
      case '11':
        descNo.value = true;
        Derived_exception.value = true;
        Exception.value = true;
        desc.value = '转三线处理超时：转项目组三线处理超过一个工作日';
        getFmbizPager();
        break;
      case '13':
        Exception.value = true;
        Derived_exception.value = false;
        descNo.value = false;
        getFmbizPager();
        break;
      case '14':
        Exception.value = true;
        Derived_exception.value = false;
        descNo.value = false;
        getFmbizPager();
        break;
      case '15':
        Exception.value = false;
        Derived_exception.value = true;
        descNo.value = false;
        fmBizSummary();
        break;
    }
  };
  const calHeight = () => {
    const rect = container.value.getBoundingClientRect();
    tableHeight.value = rect.height;
  };
  // 导出当前页
  const downloadExcel = () => {
    exportFmBiz({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      sysid: orgId.value,
      faultDecriptSummary: changeTitle.value,
      faultNo: changeCode.value,
      currentPage: 'currentPage',
      flag: activeIndex.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      downloadlist(res.data.msg);
    });
    // if (activeIndex.value == '3') {
    //   exportDiff({
    //     pageNum: pageNum.value,
    //     pageSize: pageSize.value,
    //     sysId: orgId.value,
    //     no: changeCode.value,
    //     currentPage: 'currentPage'
    //   }).then((res) => {
    //     if ((res as any).data.code !== 0) {
    //       ElMessage({
    //         message: (res as any).data.msg,
    //         type: 'error'
    //       });
    //       return;
    //     }
    //     downloadlist(res.data.msg);
    //   });
    // } else {
    // exportFmBiz({
    //   pageNum: pageNum.value,
    //   pageSize: pageSize.value,
    //   sysid: orgId.value,
    //   faultDecriptSummary: changeTitle.value,
    //   faultNo: changeCode.value,
    //   currentPage: 'currentPage',
    //   flag: activeIndex.value
    // }).then((res) => {
    //   if ((res as any).data.code !== 0) {
    //     ElMessage({
    //       message: (res as any).data.msg,
    //       type: 'error'
    //     });
    //     return;
    //   }
    //   downloadlist(res.data.msg);
    // });
    // }
  };
  const downloadlist = (type: string) => {
    download({
      fileName: type,
      delete: true
    }).then((res) => {
      const link = document.createElement('a');
      let blob = new Blob([res.data], {
        type: 'application/vnd.ms-excel'
      });
      link.style.display = 'none';
      link.href = URL.createObjectURL(blob);
      link.download = type; //下载的文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
  };
  const Select_downloadExcel = () => {
    exportFmBiz({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      sysid: orgId.value,
      faultDecriptSummary: changeTitle.value,
      faultNo: changeCode.value,
      currentPage: '',
      flag: activeIndex.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      downloadlist(res.data.msg);
    });
    // if (activeIndex.value == '3') {
    //   exportDiff({
    //     pageNum: pageNum.value,
    //     pageSize: pageSize.value,
    //     sysId: orgId.value,
    //     no: changeCode.value,
    //     currentPage: ''
    //   }).then((res) => {
    //     if ((res as any).data.code !== 0) {
    //       ElMessage({
    //         message: (res as any).data.msg,
    //         type: 'error'
    //       });
    //       return;
    //     }
    //     downloadlist(res.data.msg);
    //   });
    // } else {
    //   exportFmBiz({
    //     pageNum: pageNum.value,
    //     pageSize: pageSize.value,
    //     sysid: orgId.value,
    //     faultDecriptSummary: changeTitle.value,
    //     faultNo: changeCode.value,
    //     currentPage: '',
    //     flag: activeIndex.value
    //   }).then((res) => {
    //     if ((res as any).data.code !== 0) {
    //       ElMessage({
    //         message: (res as any).data.msg,
    //         type: 'error'
    //       });
    //       return;
    //     }
    //     downloadlist(res.data.msg);
    //   });
    // }
  };
  const SummaryExport = () => {
    fmBizSummaryExport({ flag: '1' }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      downloadlist(res.data.msg);
    });
  };
  const BySysSummaryExport = () => {
    fmBizBySysSummaryExport({ flag: '1' }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      downloadlist(res.data.msg);
    });
  };
  const search = () => {
    if (!state.value) {
      orgId.value = '';
    } else {
      state.value = state.value.replace(/(^\s*)|(\s*$)/g, '');
      if (!orgId.value) {
        orgId.value = state.value;
      }
    }
    pageNum.value = 1;
    changeTitle.value = changeTitle.value.replace(/(^\s*)|(\s*$)/g, '');
    changeCode.value = changeCode.value.replace(/(^\s*)|(\s*$)/g, '');
    if (activeIndex.value == '15') {
      fmBizSummary();
    } else {
      getFmbizPager();
    }
  };
  const resetForm = () => {
    changeTitle.value = '';
    changeCode.value = '';
    state.value = '';
    orgId.value = '';
  };
  const back = () => {
    // this.$router.go(-1);
    router.push({
      name: 'restructure'
    });
  };
  // 点击行触发，选中或不选中复选框
  const handleRowClick = (row) => {
    multipleTable.value = row;
    multipleTableRef.value.toggleRowSelection(row);
    selectChange(multipleTable.value);
  };
  const selectChange = (selection: string) => {
    if (selection.length > 1) {
      const del_row = selection.shift();
      multipleTableRef.value!.toggleRowSelection(del_row);
    }
  };
  const handleSelectionChange = (val: string) => {
    multipleTable.value = val;
  };
  const detail = () => {
    if (!multipleTable.value.length) {
      Elessage({
        message: '请先勾选查看的数据',
        type: 'warning'
      });
    } else {
      router.push({
        name: 'operation_detail',
        params: {
          value: multipleTable.value[0].faultNo,
          fmId: multipleTable.value[0].fmId,
          type: activeIndex.value
        }
      });
      // if (activeIndex.value == '3') {
      //   router.push({
      //     name: 'difficlt_detail',
      //     params: {
      //       value: multipleTable.value[0].no,
      //       type: activeIndex.value
      //     }
      //   });
      // } else {
      //   router.push({
      //     name: 'operation_detail',
      //     params: {
      //       value: multipleTable.value[0].faultNo,
      //       fmId: multipleTable.value[0].fmId,
      //       type: activeIndex.value
      //     }
      //   });
      // }
    }
  };
  // 分页
  const handleSizeChange = (size) => {
    pageSize.value = size;
    if (activeIndex.value == '15') {
      fmBizSummary();
    } else {
      getFmbizPager();
    }
  };
  const handleCurrentChange = (num) => {
    pageNum.value = num;
    localStorage.setItem('operationListPage', num);
    if (activeIndex.value == '15') {
      fmBizSummary();
    } else {
      getFmbizPager();
    }
  };
  // 选中的系统对应ID
  const handleSelect_orgId = (item) => {
    orgId.value = item;
  };

  // // 系统名过滤
  // const querySearch = (queryString: string, cb) => {
  //   const results = queryString ? restaurants.filter(createFilter(queryString)) : restaurants;
  //   // 调用 callback 返回建议列表的数据

  //   cb(results);
  // };
  // const createFilter = (queryString: striing) => {
  //   return (restaurant) => {
  //     if (restaurant.value) {
  //       //return restaurant.value.includes(queryString);
  //       return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  //     }
  //   };
  // };
  onBeforeUnmount(() => {
    enterKeyupDestroyed();
  });
  watch(
    () => router.options.history.state.back,
    (newVal) => {
      if (newVal == '/restructure') {
        localStorage.removeItem('operationListPage');
      }
    },
    { immediate: true }
  );
</script>

<style scoped lang="less">
  .operationList {
    width: 100%;
    height: 100vh;
    background: #eaeef4;
    padding: 20px;
    box-sizing: border-box;
    //background-image: url("../../assets/images/background-image.jpg");

    .title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      .tip {
        height: 34px;
        line-height: 34px;
        font-size: 18px;
        font-weight: 400;
        color: #46545d;
        margin: 0;
        padding: 0;
      }

      .goBack {
        background: #007af5;
        min-width: 80px;
        height: 34px;
        border: none;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        cursor: pointer;
        &.exceptions {
          margin-right: 5px;
        }
      }
    }
    .tabs_item {
      height: calc(100% - 50px);
      background: #fff;
      padding: 20px;
      box-sizing: border-box;
      :deep(.el-tabs) {
        height: 100%;
        .el-tabs__header {
          .el-tabs__nav-wrap::after {
            width: 0;
          }
          .el-tabs__nav-wrap {
            .el-tabs__nav-scroll {
              .el-tabs__nav {
                .el-tabs__active-bar {
                  height: 2px;
                }
                .el-tabs__item {
                  font-size: 16px;
                  font-weight: 400;
                  color: #46545d;
                  &.is-active {
                    font-weight: bold;
                    color: #007af5;
                  }
                }
              }
            }
          }
        }
        .el-tabs__content {
          height: calc(100% - 40px);
          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
    .contain {
      background: #fff;
      height: calc(100% - 50px);
      .el-container {
        height: 100%;
        .el-header {
          .el-menu--horizontal {
            border-bottom: none;
            .el-menu-item {
              font-size: 16px;
              font-weight: 400;
              color: #46545d;
              &.is-active {
                font-size: 16px;
                font-weight: bold;
                color: #007af5;
                border-bottom: 2px solid #007af5;
              }
            }
          }
        }
        .el-main {
          .main {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            .demo-form-inline {
              display: flex;
              // height: 34px;
              // max-width: 60%;
              // width: 50%;
              //align-items: center;
              :deep(input::placeholder) {
                font-size: 14px;
                font-weight: 400;
                color: #bbbbbb;
              }
              :deep(.el-form-item) {
                margin-bottom: 0;
                line-height: 34px;
                height: 34px;
                width: 40%;
              }
              :deep(.el-form-item__content) {
                line-height: 34px;
                //height: 43px;
                width: 80%;
              }
              :deep(.el-input__inner) {
                // width: 200px;
                // height: 34px;
                background: #ffffff;
                // border: 1px solid #dddddd;
                border-radius: 2px;
              }
              :deep(.el-form-item__label) {
                // color: #6fd7f7;
                font-size: 14px;
                font-weight: 400;
                color: #46545d;
                // height: 34px;
                // line-height: 34px;
              }
            }
            .button {
              display: flex;
              justify-content: space-around;
              // max-width: 40%;
              .btn {
                min-width: 80px;
                height: 34px;
                line-height: 34px;
                background: #007af5;
                border-radius: 2px;
                font-size: 12px;
                font-weight: 400;
                color: #ffffff;
                border: 0;
                cursor: pointer;
                &.reset {
                  margin: 0 10px;
                }
              }
              #goBack {
                // max-width: 131px;
                height: 34px;
                background: #007af5;
                border-radius: 2px;
                border: 0;
                font-size: 12px;
                font-weight: 400;
                color: #ffffff;
                cursor: pointer;
              }
              .el-dropdown {
                margin: 0px 10px;
                cursor: pointer;
              }
              .el-dropdown-link {
                // display: inline-block;
                width: 80px;
                height: 34px;
                line-height: 34px;
                text-align: center;
                color: #fff;
                background: #007af5;
                border-radius: 2px;
              }
            }
          }

          .tableBox {
            height: calc(100% - 50px);
            background: #fff;
            // padding: 20px;
            box-sizing: border-box;
            //overflow: hidden;
            .desc {
              font-size: 12px;
              font-weight: 400;
              color: #ec4b5a;
              background: #fbdbde;
              line-height: 33px;
              height: 33px;
              text-align: center;
              border-radius: 2px;
              display: flex;
              align-items: center;
              justify-content: center;
              img {
                width: 16px;
                height: 16px;
                // margin: auto;
                margin-right: 10px;
              }
              // padding: auto;
            }
            .table {
              // background: rgba(0, 0, 0, 0.1);
              height: calc(100% - 93px);
              width: 100%;
              margin-bottom: 15px;
              :deep(.el-table-column--selection.is-leaf .el-checkbox) {
                display: none;
              }
              :deep(.el-table__cell.is-leaf) {
                //background: rgba(0, 0, 0, 0.1);
                // color: #6fd7f7;
                //color: #fff;
                color: #929ea8;
              }

              :deep(tr:hover > td) {
                background-color: transparent;
              }
              :deep(.el-table__empty-text) {
                //color: #fff;
                color: #929ea8;
              }
              :deep(td.el-table__cell) {
                //color: #fff;
                color: #929ea8;
              }
            }
            .el-pagination {
              height: 34px;
              padding: 0;
              box-sizing: border-box;
              //width: 50%;
              :deep(.el-pagination__total) {
                font-size: 14px;
                font-weight: 400;
                color: #bbbbbb;
                line-height: 34px;
              }

              :deep(.el-input__inner) {
                height: 34px;
                //width: 60px;
                background: #fff;
                //color: #66b1ff;
                color: #46545d;
              }
              :deep(button:disabled) {
                background: #fff;
                height: 34px;
                line-height: 34px;
                border: 1px solid #dddddd;
                //color: #66b1ff;
                color: #46545d;
                box-sizing: border-box;
              }
              :deep(.el-pager li) {
                //background: rgba(0, 0, 0, 0.1);
                background: #fff;
                height: 34px;
                line-height: 34px;
                border: 1px solid #dddddd;
                //color: #66b1ff;
                color: #46545d;
                box-sizing: border-box;
                &.active {
                  // color: #fff;
                  color: #46545d;
                }
              }
              :deep(.btn-prev) {
                background: #fff;
                height: 34px;
                line-height: 34px;
                border: 1px solid #dddddd;
                //color: #66b1ff;
                color: #46545d;
                box-sizing: border-box;
              }
              :deep(.btn-next) {
                background: #fff;
                height: 34px;
                line-height: 34px;
                border: 1px solid #dddddd;
                //color: #66b1ff;
                color: #46545d;
                box-sizing: border-box;
              }
              :deep(span:not([class*='suffix'])) {
                color: #bbbbbb;
              }
              .el-pagination__jump {
                height: 34px;
                line-height: 34px;
              }
            }
          }
        }
      }
    }
  }
</style>
